<template>
	<div class="box">
		<headerSearch
      :selectObj="selectObject"
      :goSearchFc="searchClick"
      :buttonList="buttonList"
    />
        <BaseTable
            :data="templateDesign"
            :columns="templateColumns"
            :tableHeight="tableHeight"
            :pagination="false"
            :loading="loading"
            @details="tableClick"
        ></BaseTable>

		<div class="page">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryAll.startpage"
				:page-sizes="[10, 15, 20, 25, 30]"
				:page-size="queryAll.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum"
			></el-pagination>
		</div>
    <el-dialog
      title="模板设计"
      append-to-body
      :visible.sync="previewVisible"
      width="90%"
      top="3vh"
    >
      <print 
        
        :printData="printData" 
        :rateTypeData="rateTypeData" 
        :templatePanel="templatePanel" 
        @closeD="closeD" 
        ref="print"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewVisible = false">取 消</el-button>
      </span>
    </el-dialog>

	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import print from '@/components/print/index.vue'
import api from '@/api/Basic/templateDesign/index'
import publicapi from '@/api/public'
import headerSearch from '@/components/headerSearch/index.vue'
export default {
  name: 'templateDesign',
  components: {
    BaseTable,
    headerSearch,
    print
  },
  data() {
    return {
      previewVisible: false,
      printData: {
        name: '黄磊', // 没用
        logoTest: 'https://portrait.gitee.com/uploads/avatars/user/1800/5400665_CcSimple_1591166830.png!avatar60', // 还用这个就行
        statementNo: 'WFJSC2112082170040', // NO
        shipName: '我是船名', // 船名
        tradeType: '外贸', // 类型
        leaveBerthTime: '2020-01-01', // 离港日期
        payCompanyName: '天津恒润物流有限公司', // 结算单位
        invoiceDate: '2020-01-01', // 计费
        userName: '张鑫', // 制表人
        totalAmount: '0', // 合计金额
        totalAmountBig: '合计金额大写', // 合计金额大写
        table: [
          { index: '1', rateTypeName: '王小可', cargoTypeName: '男', unitName: '120', rate: '9189元', quantity: '数量', quantityPlug: '天/次', amount: '金额', totalAmount: '合计金额', remark: '备注' }
        ]
      },
      // 搜索框显示对象
      selectObject: [
        {
          name: '模板类型',
          type: 'select',
          modelName: 'rateTypeCode',
          selectData: [],
          selectLabel: 'dictLabel',
          selectValue: 'dictValue'
        }
      ],
      // header的按钮list
      buttonList: [
        { label: '新增', type: 'primary', icon: 'el-icon-plus', click: () => this.openPrint, permission: 'basicManagement:templateDesign:add' },
        { label: '编辑', type: 'primary', icon: 'el-icon-edit', disabled: true, click: () => this.editTemplate, permission: 'basicManagement:templateDesign:edit' },
        { label: '删除', type: 'danger', icon: 'el-icon-delete', disabled: true, click: () => this.deleteTemplate, permission: 'basicManagement:templateDesign:delete' }
      ],
      templateColumns: [ // table表头
        { prop: 'rateTypeName', label: '模板类型' },
        { prop: 'createName', label: '创建人' },
        { prop: 'createdTime', label: '创建时间' }
      ],
      templateDesign: [],
      templatePanel: {
        panels: [
          {
            index: 0,
            name: 1,
            height: 147.6,
            width: 210,
            paperHeader: 0,
            paperFooter: 396,
            printElements: [],
            paperNumberLeft: 577.5,
            paperNumberTop: 400.5,
            paperNumberDisabled: true
          }
        ]
      }, // 模板
      activeName: 'first',
      loading: false,
      queryAll: {
        startpage: 1,
        pagesize: 10
      },
      totalNum: 0,
      clickRow: {},
      isGet: false, // 是否是查询功能下
      rateTypeData: [] // 结算类型
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 60
    }
  },
  created() {
    this.getRateType()
  },
  methods: {
    /**
     * 获取模板
     */
    async getTemplateList() {
      this.loading = true
      this.settlementDetailData = []
      await api
        .reqGetTemplate(this.queryAll)
        .then(res => {
          this.loading = false
          this.buttonList[1].disabled = true
          this.buttonList[2].disabled = true
          this.templateDesign = res.data.data.pages
          this.queryAll.startpage = res.data.data.pageNum
          this.queryAll.pagesize = res.data.data.pageSize
          this.totalNum = res.data.data.totalNum
        })
        .catch(() => {})
    },
    /**
     * 新增模板
     */
    openPrint() {
      // this.$refs.printPreview.preView()
      this.templatePanel = {
        panels: [
          {
            index: 0,
            name: 1,
            height: 147.6,
            width: 210,
            paperHeader: 0,
            paperFooter: 396,
            printElements: [],
            paperNumberLeft: 577.5,
            paperNumberTop: 400.5,
            paperNumberDisabled: true
          }
        ]
      }
      this.previewVisible = true
      this.$nextTick(() => {
        this.$refs.print.$refs.design.clickRowId = ''
        this.$refs.print.$refs.design.rateTypeCode = ''
      })
      console.log('123123');
    },
    /**
     * 编辑模板
     */
    async editTemplate() {
      this.previewVisible = true
      const res = await api.reqGetTemplateById(this.clickRow.id)
      this.templatePanel = JSON.parse(res.data.data.model)
      console.log(this.templatePanel, 'this.templatePanel');
      this.$nextTick(() => {
        this.$refs.print.$refs.design.clickRowId = this.clickRow.id
        this.$refs.print.$refs.design.rateTypeCode = res.data.data.rateTypeCode
      })
    },
    /**
     * 删除模板
     */
    async deleteTemplate() {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.reqDeleteTemplate(this.clickRow.id).then(res => {
          if (res.data.code === '0000') {
            this.getTemplateList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    closeD() {
      this.getTemplateList()
      this.previewVisible = false
    },
    /**
     * 获取行信息
     */
    tableClick(row) {
      this.clickRow = row
      this.buttonList.forEach(item => {
        item.disabled = true
      })
      this.buttonList[0].disabled = false
      this.buttonList[1].disabled = false
      this.buttonList[2].disabled = false
    },
    /**
     * 获取结算类型
     */
    async getRateType() {
      const res = await publicapi.getDictData('RATE_TYPE')
      this.rateTypeData = res.data.data.RATE_TYPE
      this.selectObject[0].selectData = res.data.data.RATE_TYPE
    },
    handleSizeChange(val) {
      this.queryAll.pagesize = val
      this.getTemplateList()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.getTemplateList()
    },
    searchClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData)
      this.getTemplateList()
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";
@import "~@/assets/css/bootstrap.min.css";
@import "~@/assets/css/print-lock.css";
.selectBox {
	justify-content: space-between;
	display: flex;
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-bottom: 0;
	border-left: none;
	height: 50px;
	position: relative;
	align-items: center;
	padding-left: 14px;
	padding-right: 20px;
}
.input_box {
	display: flex;
}
.page {
	background: #ffffff;
	text-align: right;
	border-radius: 0 0 4px 4px;
	padding: 5px 20px;
}
/deep/.el-tabs--border-card > .el-tabs__content {
	padding: 0 !important;
}
//抽屉底部样式
/deep/ .el-drawer__header {
	margin-bottom: 0;
	padding: 16px;
	border-bottom: 1px solid gainsboro;
}
.demo-drawer__footer {
	text-align: right;
	padding-right: 20px;
	border-top: 1px solid #c8cfde;
	background-color: #f5f7fa;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 50px;
}
.box {
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-radius: 4px 4px 0 0;
	border-top: none;
}
</style>
